<!--文件-->
<!--chenyi 2019-10-13 11:47:54-->
<template>
  <div>
    <!--搜索条件-->
    <el-form inline :model="searchParam" ref="searchParam" label-width="80px" class="search-form">
      <el-button type="primary" icon="el-icon-refresh-left" @click="restoreBatch">还原</el-button>
      <el-button type="primary" plain icon="el-icon-delete" @click="clearRecycle">清空回收站</el-button>
      <div class="file-right-btn">
        <el-input v-model="searchParam.fileNameVague" prefix-icon="el-icon-search" style="width: 250px;"
                  placeholder="搜索您的文件" clearable></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchForm">查询</el-button>

      </div>

    </el-form>

    <!--表格-->
    <transition name="el-fade-in-linear">
      <div v-show="action === 'list'">
        <el-table
          :data="tableData"
          size="mini"
          v-loading="loading"
          element-loading-text="数据加载中"
          @cell-mouse-enter="cellMouseEnter"
          @cell-mouse-leave="cellMouseLeave"
          @selection-change="handleSelectionChange"
          class="ele-table">

          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column
            prop="fileType"
            width="55"
          >
            <template slot-scope="scope">
              <img :src="getFileType(scope.row)" style="height:40px">
            </template>
          </el-table-column>

          <el-table-column
            prop="fileName"
            label="文件名"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            width="100">
            <template slot-scope="{row}">
              <el-button-group v-show="currentCellId === row.id">
                <el-tooltip class="item" effect="dark" content="还原" placement="top">
                  <i class="el-icon-refresh-left cell-btn" @click="restore(row.id)"
                  ></i>
                </el-tooltip>
                <el-tooltip class="item ml-10" effect="dark" content="删除" placement="top">
                  <i class="el-icon-delete cell-btn" @click="deleteOne(row.id)"
                  ></i>
                </el-tooltip>
              </el-button-group>
            </template>
          </el-table-column>

          <el-table-column
            prop="fileSize"
            label="文件大小"
            width="150"
          >
          </el-table-column>

          <el-table-column
            prop="deleteTime"
            label="删除时间"
            width="200"
          >
            <template slot-scope="scope">
              <es-time format="yyyy-MM-dd hh:mm:ss" type="format" :value="scope.row.deleteTime"></es-time>
            </template>
          </el-table-column>

          <el-table-column
            prop="deleteTime"
            label="有效时间"
            width="400"
          >
            <template slot-scope="scope">
              {{effectiveTime(scope.row.deleteTime)}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </transition>
    <!--分页-->
    <el-pagination
      style="margin: 20px;float: right;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="searchParam.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>

<script>
  import {getRecycleList,clearRecycle,restoreFile,remove} from '../../api/file/fileApi'
  import validate from '../../libs/validate'

  export default {
    name: 'file',
    data() {
      return {
        searchParam: {//表格数据请求参数
          fileNameVague: '',
          page: 1,
          limit: 10
        },
        title: '',
        action: 'list',
        loading: false,
        item: {},  //修改/详情数据
        multipleSelection: [], //复选框选中的值
        tableData: [],
        total: 0,
        ids: [],
        currentCellId:0,
      }
    },
    mounted() {
      this.getTableData()
    },
    methods: {
      deleteOne(id){
          let _this = this;
          _this.$confirm('文件删除后将无法恢复，您确认要彻底删除所选文件吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            callback: function (action, instance) {
              if (action === "confirm") {
                remove([id]).then(res=>{
                  if (res.code === 200) {
                    //刷新表格数据
                    _this.getTableData();
                    _this.$message.success("删除成功");
                  } else {
                    _this.$message.error(res.msg);
                  }
                });
              }
            }
          })
      },
      //单个文件还原
      restore(fileId) {
        let ids=new Array();
        ids.push(fileId);
        this.restoreFile(ids);
      },
      //批量还原
      restoreBatch(){
        let _this = this;
        let ids = _this.getSelectIds();
        if(ids.length > 0 ){
          this.restoreFile(ids);
        }
      },
      //文件还原
      restoreFile(ids){
        let _this = this;
        _this.$confirm('确认还原选中的文件？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: function (action, instance) {
            if (action === "confirm") {
              restoreFile(ids).then(res=>{
                if (res.code === 200) {
                  //刷新表格数据
                  _this.getTableData();
                  _this.$message.success("还原成功");
                } else {
                  _this.$message.error(res.msg);
                }
              });
            }
          }
        })
      },
      //有效时间
      effectiveTime(deleteTime){
        return Math.ceil(30-((new Date().getTime() - deleteTime)/(24*60*60*1000)))+"天";
      },
      //清空回收站
      clearRecycle() {
        let _this = this;
        _this.$confirm('此操作将清空所有文件，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: function (action, instance) {
            if (action === "confirm") {
              clearRecycle().then(res => {
                if (res.code === 200) {
                  //刷新页面
                  //刷新表格数据
                  _this.tableData=[];
                } else {
                  _this.$message.error(res.msg);
                }
              });
            }
          }
        })

      },
      cellMouseEnter(row, column, cell, event) {
        this.currentCellId = row.id;
      },
      cellMouseLeave() {
        this.currentCellId = 0;
      },
      getFileType(row) {
        if(row.fileType === 'pic'){return row.fileUrl}
        return `/static/img/file/${row.fileType}.png`;
      },
      //获取数据
      getTableData() {
        let _this = this
        _this.loading = true
        getRecycleList(_this.searchParam).then((res) => {
          if (res.code === 200) {
            _this.tableData = res.data
            console.log(_this.tableData)
            _this.total = res.total
          } else {
            this.$message.error(res.msg)
          }
          _this.loading = false
        })
      },
      //获取选中行
      getSelectIds(row) {
        let chcekeds = [];
        let ids = [];
        if (!row || Object.keys(row).length === 0) {
          chcekeds = this.multipleSelection;
          if (chcekeds.length === 0) {
            this.$message.error("至少选择一条数据");
          } else {
            for (let key in chcekeds) {
              ids.push(chcekeds[key].id);
            }
          }
        } else {
          ids.push(row.id);
        }
        return ids;

      },
      //查询表格
      searchForm() {
        this.searchParam.page = 1
        //获取数据
        this.getTableData()
      },
      //重置查询表格
      resetSearchForm() {
        this.$refs['searchParam'].resetFields()
        //获取数据
        this.getTableData()
      },
      handleSizeChange(limit) {
        this.searchParam.limit = limit
        //获取数据
        this.getTableData()
      },
      handleCurrentChange(page) {
        this.searchParam.page = page
        //获取数据
        this.getTableData()
      },
      //复选框选择
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
    }
  }
</script>

<style scoped>
  .ele-table {
    width: calc(100% - 10px);
    margin-top: 15px;
    padding-right: 10px;
    font-size: 14px !important;
    color: #606266 !important;
  }

  .ele-table .el-button + .el-button {
    margin-left: 0 !important;
  }

  .cell-btn {
    font-size: 20px;
    color: rgb(64, 158, 255);
    cursor: pointer
  }

  .file-right-btn {
    display: inline-block;
    float: right;
    margin-right: 10px;
  }

  .file-name {
    cursor: pointer;
  }

  .file-name:hover {
    color: #409EFF;
  }

  .file-catalog {
    margin-top: 20px;
    display: inline-block;
  }

</style>
